<template>
  <scroll-view
    :scroll-y="true"
    class="page"
    :style="[pageJson.style]"
    @scrolltolower="handleScrollToLower"
    @scroll="handleScroll"
  >
    <u-navbar
      v-if="showNavbar && !hideNavbar"
      :title="pageJson.attribute.title"
      safeAreaInsetTop
      fixed
      placeholder
      @leftClick="backHandle"
    >
      <view slot="left"></view>
    </u-navbar>
    <LowCodeComponents
      v-for="items in pageJson.items"
      :ref="items.type"
      @event="event"
      :key="items.id"
      :item="items"
    />
  </scroll-view>
</template>
<script>
import LowCodeComponents from "./lc-components";
export default {
  components: {
    LowCodeComponents,
  },
  name: "LowCodePage",
  props: {
    pageJson: {
      type: Object,
      default: function () {
        return {
          style: {
            width: "auto",
            height: "100vh",
            backgroundColor: "#fff",
          },
          items: [],
        };
      },
    },
    navBarHeight: {
      type: Number,
      default: 88, //单位rpx
    },
    hideNavbar: false,
  },
  created() {
    this.init();
  },
  data() {
    return {
      showNavbar: true,
    };
  },
  methods: {
    event(e) {
      this.$emit("event", e);
    },
    init() {
      if (this.judgeInWeChatBrowser()) {
        this.setInWeChatBrowser();
      }
      this.setTitle();
    },
    setTitle() {
      if (document) {
        document.querySelector("title").innerHTML =
          this.pageJson.attribute.title;
      }
    },
    setInWeChatBrowser() {
      this.showNavbar = !this.judgeInWeChatBrowser();
    },
    // 判断是否是微信内置浏览器
    judgeInWeChatBrowser() {
      console.log("判断是否是微信内置浏览器===", navigator?.userAgent);
      if (navigator?.userAgent) {
        const ua = navigator?.userAgent?.toLowerCase();
        return ua.match(/MicroMessenger/i) == "micromessenger";
      }
    },
    backHandle() {
      uni.navigateBack();
    },
    getForm() {
      for (const key in this.$refs) {
        if (key === "yqd-form-module") {
          return this.$refs[key][0].$children[0].$children[0].getForm();
        }
      }
    },
    async trackFormValidate() {
      for (const key in this.$refs) {
        if (key === "yqd-form-module") {
          return this.$refs[
            key
          ][0].$children[0].$children[0].trackFormValidate();
        }
      }
    },
    handleSearch(val) {
      console.log("搜索", val);
      const nearbyKey = "yqd-nearby-stores-list";
      const moduleKey = "yqd-module";
      const { platform } = uni.$u;
      // this.$refs[key][0].$children[0].$children[0]
      switch (platform) {
        case "mp":
          let ref = null;
          for (const key in this.$refs) {
            if (key === moduleKey) {
              this.$refs[moduleKey].map((f, fIndex) => {
                f?.$children[0]?.$children.map((c, index) => {
                  if (c.$children[0].sign === nearbyKey) {
                    ref =
                      this.$refs[moduleKey][fIndex]?.$children[0]?.$children[
                        index
                      ].$children[0];
                  }
                });
              });
            }
            if (key === nearbyKey) {
              ref = this.$refs[nearbyKey][0].$children[0];
            }
          }

          if (ref) {
            ref.handleSearch(val);
          }
          break;
        case "h5":
          this.$refs[nearbyKey][0]?.$children[0]?.$children[0]?.handleSearch(
            val
          );
          break;
      }
    },
    handleScrollToLower() {
      // console.log("触底", this.$refs);
      const nearbyKey = "yqd-nearby-stores-list";
      const moduleKey = "yqd-module";
      const { platform } = uni.$u;
      // this.$refs[key][0].$children[0].$children[0]
      switch (platform) {
        case "mp":
          let ref = null;
          for (const key in this.$refs) {
            if (key === moduleKey) {
              this.$refs[moduleKey].map((f, fIndex) => {
                f?.$children[0]?.$children.map((c, index) => {
                  if (c.$children[0].sign === nearbyKey) {
                    ref =
                      this.$refs[moduleKey][fIndex]?.$children[0]?.$children[
                        index
                      ].$children[0];
                  }
                });
              });
            }
            if (key === nearbyKey) {
              ref = this.$refs[nearbyKey][0].$children[0];
            }
          }

          if (ref) {
            ref.handleNextPage();
          }
          break;
        case "h5":
          this.$refs[
            nearbyKey
          ][0]?.$children[0]?.$children[0]?.handleNextPage();
          break;
      }
    },
    handleScroll(event) {
      const nearbyKey = "yqd-nearby-stores-list";
      const moduleKey = "yqd-module";
      const { scrollTop } = event.detail;
      const { platform } = uni.$u;
      // this.$refs[key][0].$children[0].$children[0]
      switch (platform) {
        case "mp":
          let ref = null;
          for (const key in this.$refs) {
            if (key === moduleKey) {
              this.$refs[moduleKey].map((f, fIndex) => {
                f?.$children[0]?.$children.map((c, index) => {
                  if (c.$children[0].sign === nearbyKey) {
                    ref =
                      this.$refs[moduleKey][fIndex]?.$children[0]?.$children[
                        index
                      ].$children[0];
                  }
                });
              });
            }
            if (key === nearbyKey) {
              ref = this.$refs[nearbyKey][0].$children[0];
            }
          }

          if (ref) {
            ref.handleFixNearByTags(this.navBarHeight, scrollTop);
          }
          break;
        case "h5":
          this.$refs[
            nearbyKey
          ][0]?.$children[0]?.$children[0]?.handleFixNearByTags(
            this.navBarHeight,
            scrollTop
          );
          break;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.page {
  width: 100vw;
  overflow: scroll;
}
</style>
